import { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
// 导入 action
import { increment, decrement, addToNum } from './store/modules/counterStore'
import { fetchChannelList } from './store/modules/channelStore'

function ReduxDemo() {
	// 获取 redux store 中的 state 数据
	const { count } = useSelector((state) => state.counter)
	const { channelList } = useSelector((state) => state.channel)

	// 获取 redux store 中的 dispatch 方法
	const dispatch = useDispatch()

	useEffect(() => {
		// redux 中的异步 action
		dispatch(fetchChannelList())
	}, [dispatch])

	return (
		<>
			<h2>Redux Demo</h2>
			<hr />
			<h4>[redux]当前计数：{count}</h4>
			<button onClick={() => dispatch(increment())}>+1</button>
			&nbsp; &nbsp;
			<button onClick={() => dispatch(decrement())}>-1</button>
			&nbsp; &nbsp;
			<button onClick={() => dispatch(addToNum(10))}>+10</button>
			&nbsp; &nbsp;
			<button onClick={() => dispatch(addToNum(20))}>+20</button>
			<hr />
			<h4>[redux]当前频道列表：</h4>
			<ul>
				{channelList.map((item) => (
					<li key={item.id}>{item.name}</li>
				))}
			</ul>
		</>
	)
}

export default ReduxDemo
